<template>
  <div class="view-container">

    <div class="main-content">

      <div class="list-container" style="padding-top: 0">

        <search-from :form-list="formList" :indexLength="3" @onConfirm="filterDataConfirm" @onReset="filterReset" />

        <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header" size="small"
          @row-click="aloneClick">

          <el-table-column :min-width="160" :show-overflow-tooltip="true" fixed="left" header-align="center" label="编号"
            prop="agentProductNumber" />

          <el-table-column :min-width="160" :show-overflow-tooltip="true" fixed="left" header-align="center"
            label="代理商名称">
            <template #default="{row}">
              {{ row.agentName }}
            </template>
          </el-table-column>

          <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="产品通用名">
            <template #default="{row}">
              <span>{{ row.productPopularName }}</span>
            </template>
          </el-table-column>

          <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="商品名"
            prop="productName" />

          <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="包装规格"
            prop="packSpecs" />

          <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="生产厂家"
            prop="producer" />

          <el-table-column :min-width="120" :show-overflow-tooltip="true" align="center" label="可营销终端"
            prop="terminalType">
            <template #default="{row}">
              {{ getLabel('app_mode', row.terminalType) }}
            </template>
          </el-table-column>

          <el-table-column :min-width="200" :show-overflow-tooltip="true" header-align="center" label="代理地区">
            <template #default="{row}">
              <area-list-view :areas="row?.region" />
            </template>
          </el-table-column>

          <el-table-column :min-width="120" :show-overflow-tooltip="true" align="center" label="交易价(元)"
            prop="tradePrice" />

          <el-table-column :min-width="180" :show-overflow-tooltip="true" align="center" label="负责营销职员"
            prop="headName" />

          <el-table-column :min-width="160" :show-overflow-tooltip="true" align="center" fixed="right" label="状态">
            <template #default="{row}">
              <div style="line-height: 20px"> {{ getLabel('marketing_agent_product_status', row.agentProductStatus) }}
              </div>
              <div v-if="row.agentProductDevStatus === '1' && row.agentProductStatus !== '-2'" class="flow-status-color" style="line-height: 20px">
                [无交易终端]
              </div>
            </template>
          </el-table-column>

          <el-table-column :min-width="150" align="center" fixed="right" label="操作">
            <template #default="{row}">

              <el-button
                v-auth="{v:['crm:marketing:matching:regional:addDistribution'],bool:row.agentProductStatus === '2'}"
                type="text" @click="handlAddDistribution(row)">
                添加配送信息
              </el-button>
            </template>

          </el-table-column>
        </table-view>

        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page" :total="total"
          style="display: flex; justify-content: flex-end" @pagination="handlList" />

      </div>

    </div>

    <!--添加配送信息-->
    <shipping ref="shippingRef" :tradePrice="rowData?.tradePrice" @success="success" />

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { crmStore } from "@CRM/store";

export default {
  name: "Index",
  components: {
    shipping: defineAsyncComponent(() => import("../modules/shipping.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      queryParams: {
        agentAttribute: "1",
        tabStatus: "2",
        pageSize: 20,
        page: 1,
        agentProductStatus: "", //  状态
        agentType: "", // 代理类型
        keyWord: "", // 关键字
        productId: 0, //  产品id
        headId: 0, // 负责人,
      },
      tableData: [],
      total: 0,
      formList: [
        {
          key: "agentProductStatus",
          label: "状态",
          form_type: "select",
          value: "",
          is_search: false,
          options:
            crmStore.getters["dictionary/getDictionary"][
              "marketing_agent_product_status"
            ].filter((a) => a.value === "-2" || a.value === "2") || [],
        },
        {
          key: "agentType",
          label: "代理类型",
          form_type: "select",
          value: "",
          is_search: false,
          options: [
            { label: "企业代理", value: "agent" },
            { label: "兼职大包", value: "agent_person" },
          ],
        },
        {
          key: "productId",
          label: "产品名称",
          form_type: "select_product",
          value: "",
          is_search: false,
          options: [],
          setting: {
            label: "productName",
            value: "productId",
          },
        },
        {
          key: "keyWord",
          label: "代理名称",
          form_type: "text",
          value: "",
          is_search: false,
          options: [],
        },
        {
          key: "headId",
          label: "负责销售职员",
          form_type: "select",
          value: "",
          is_search: false,
          options: crmStore.getters["company/getHeadOptions"] || [],
          setting: {
            label: "realName",
            value: "id",
          },
        },
      ],
      shippingRef: null,
      rowData: null,
    });

    // 获取产品下拉
    const handlProductData = async () => {
      const res = await api.terminal.TERMINAL_PRODUCTID({ terminalId: 0 });
      if (res.code === 0) {
        data.formList[2].options = res.data;
      }
    };

    //获取列表
    const handlList = () => {
      api.marketingMatching.REGIONAL_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 确定搜所
    const filterDataConfirm = (val) => {
      data.queryParams.page = 1;
      data.queryParams.agentProductStatus = val.agentProductStatus; //  状态
      data.queryParams.agentType = val.agentType; // 代理类型
      data.queryParams.keyWord = val.keyWord; // 关键字
      data.queryParams.productId = Number(val.productId); //  产品id
      data.queryParams.headId = Number(val.headId); // 负责人,
      handlList();
    };

    // 取消
    const filterReset = () => {
      data.queryParams = {
        agentAttribute: "1",
        tabStatus: "2",
        pageSize: 20,
        page: 1,
        agentProductStatus: "", //  状态
        agentType: "", // 代理类型
        keyWord: "", // 关键字
        productId: 0, //  产品id
        headId: 0, // 负责人,
      };
      handlList();
    };

    //添加配送信息
    const handlAddDistribution = (row) => {
      data.rowData = row;
      data.shippingRef.open(row);
    };

    const aloneClick = (row, column, event) => {
      if (column.label === "操作") {
        return;
      }
      router.push({
        path: "/marketing/matching/regional/regionalDetail",
        query: { id: row?.id },
      });
    };

    const cellStyle = () => {
      return "cursor:pointer;";
    };

    const success = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
      handlProductData();
    });

    return {
      ...toRefs(data),
      handlProductData,
      handlList,
      filterDataConfirm,
      filterReset,
      handlAddDistribution,
      aloneClick,
      cellStyle,
      success,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
